<template>
    <div class="order">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">{{
                $t('order.home')
            }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{
                $t('order.orderManage')
            }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $t('order.orderList') }}</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 搜索订单信息 -->
        <el-row class="tools">
            <el-col :span="6">
                <!-- 搜索内容 -->
                <el-input
                    :placeholder="$t('order.placeholder')"
                    clearable
                    v-model="queryInfo.query"
                    v-on:clear="getOrderData"
                >
                    <el-button
                        slot="append"
                        icon="el-icon-search"
                        v-on:click="filterOrder"
                    ></el-button>
                </el-input>
            </el-col>
            <el-col :span="8" class="status_info">
                <span>{{ $t('order.tips') }}</span>
            </el-col>
        </el-row>

        <!-- 卡片视图区域 -->
        <el-card>
            <!-- 订单信息列表 -->
            <el-table border stripe :data="orderList">
                <el-table-column
                    type="index"
                    :label="$t('order.id')"
                    width="60"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="order_number"
                    :label="$t('order.orderId')"
                >
                </el-table-column>
                <el-table-column
                    prop="order_price"
                    :label="$t('order.price')"
                    width="150"
                >
                </el-table-column>
                <el-table-column
                    prop="pay_status"
                    :label="$t('order.isPay')"
                    width="100"
                >
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.pay_status"
                            >已付款</el-tag
                        >
                        <el-tag type="danger">未付款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="is_send"
                    :label="$t('order.isDeliver')"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="create_time"
                    :label="$t('order.time')"
                    width="300"
                >
                    <template slot-scope="scope">
                        {{ (scope.row.create_time * 1000) | dateFormat }}
                    </template>
                </el-table-column>
                <!-- 操作按钮 -->
                <el-table-column :label="$t('order.operate')" width="150">
                    <template slot-scope="scope">
                        <!-- 编辑 -->
                        <el-tooltip
                            class="item"
                            effect="dark"
                            :content="$t('order.editOrder')"
                            placement="top-end"
                        >
                            <el-button
                                size="mini"
                                type="primary"
                                icon="el-icon-edit"
                                circle
                                v-on:click="editeDialog(scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <!-- 物流 -->
                        <el-tooltip
                            class="item"
                            effect="dark"
                            :content="$t('order.LogisticsProgress')"
                            placement="top-end"
                        >
                            <el-button
                                size="mini"
                                type="success"
                                icon="el-icon-location-outline"
                                circle
                                v-on:click="showProgressBox"
                            ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-size="queryInfo.pagesize"
                :page-sizes="[1, 3, 5, 10]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </el-card>

        <!-- 编辑订单对话框 -->
        <el-dialog
            :title="$t('order.editOrder')"
            :visible.sync="editedialogFormVisible"
            v-on:close="editeDialogClose"
        >
            <el-form :model="editeform" v-bind:rules="editeRules" ref="form">
                <el-form-item
                    :label="$t('order.prefecture')"
                    :label-width="formLabelWidth"
                    prop="address1"
                >
                    <el-cascader
                        v-model="editeform.address1"
                        :options="cityData"
                        :props="{ expandTrigger: 'hover' }"
                    ></el-cascader>
                </el-form-item>
                <el-form-item
                    :label="$t('order.address')"
                    :label-width="formLabelWidth"
                    prop="address2"
                >
                    <el-input
                        autocomplete="off"
                        v-model="editeform.address2"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editeDialogClose">{{
                    $t('order.reset')
                }}</el-button>
                <el-button
                    type="primary"
                    @click="editedialogFormVisible = false"
                    >{{ $t('order.define') }}</el-button
                >
            </div>
        </el-dialog>

        <!-- 显示物流对话框 -->
        <el-dialog
            :title="$t('order.LogisticsProgress')"
            :visible.sync="progressdialogFormVisible"
        >
            <!-- 时间线 -->
            <el-timeline>
                <el-timeline-item
                    v-for="(activity, index) in progressInfo"
                    :key="index"
                    :timestamp="activity.time"
                >
                    {{ activity.context }}
                </el-timeline-item>
            </el-timeline>
        </el-dialog>
    </div>
</template>

<script>
import cityData from './citydata.js'
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Order',
    data() {
        return {
            // 要查询数据传的参数
            queryInfo: {
                // 要搜索的关键字
                query: '',
                // 当前页码
                pagenum: 1,
                // 每页显示数量
                pagesize: 3,
            },
            // 总记录数
            total: 0,
            // 订单列表数据
            orderList: [],
            // 控制编辑地址对话框是否展示
            editedialogFormVisible: false,
            // 编辑地址对话框表单宽度
            formLabelWidth: '110px',
            // 编辑地址信息
            editeform: {
                address1: [],
                address2: '',
            },
            // 编辑地址表单验证规则
            editeRules: {
                address1: [
                    {
                        required: true,
                        message: '请选择省市区县',
                        trigger: 'blur',
                    },
                ],
                address2: [
                    {
                        required: true,
                        message: '请填写详细地址',
                        trigger: 'blur',
                    },
                ],
            },
            // 省市区县数据
            cityData: cityData,
            // 控制物流对话框是否展示
            progressdialogFormVisible: false,
            // 物流信息数据
            progressInfo: [],
        }
    },
    methods: {
        // 获取订单数据列表
        async getOrderData() {
            const { data: res } = await this.$http.get('/orders', {
                params: this.queryInfo,
            })
            // 获取 msg 和 status
            const {
                meta: { msg, status },
            } = res
            // 如果获取失败
            if (status !== 200) {
                // 消息提示
                return this.$message.error(msg)
            }
            // 获取成功时, 为订单列表数据赋值
            this.orderList = res.data.goods
            // 为总记录数赋值
            this.total = res.data.total
        },
        // pagesize 每页条数发生改变时触发
        handleSizeChange(newPagesize) {
            this.queryInfo.pagesize = newPagesize
            // 获取订单数据列表
            this.getOrderData()
        },
        // pagenum 当前页数发生改变时触发
        handleCurrentChange(newPagenum) {
            this.queryInfo.pagenum = newPagenum
            // 获取订单数据列表
            this.getOrderData()
        },
        // 点击编辑地址按钮时
        editeDialog(row) {
            // 显示编辑地址对话框
            this.editedialogFormVisible = true
        },
        // 编辑地址对话框关闭时
        editeDialogClose() {
            // 将所有表单值重置为初始值并移除校验效果
            this.$refs.form.resetFields()
        },
        // 点击显示物流按钮时
        async showProgressBox() {
            // 获取物流信息
            const { data: res } = await this.$http.get('/kuaidi/1106975712662')
            // 获取 msg 和 status
            const {
                meta: { msg, status },
            } = res
            // 如果获取失败
            if (status !== 200) {
                // 消息提示
                return this.$message.error(msg)
            }
            // 获取成功时，为物流信息数据赋值
            this.progressInfo = res.data
            // 显示物流对话框
            this.progressdialogFormVisible = true
        },
        // 筛选搜索之后的订单编号内容
        filterOrder() {
            if (this.queryInfo.query !== '') {
                this.orderList = this.orderList.filter((item) => {
                    return item.order_number.includes(this.queryInfo.query)
                })
            }
        },
    },
    created() {
        // 获取订单数据列表
        this.getOrderData()
    },
}
</script>

<style lang="less" scoped>
// 级联选择器
.el-cascader {
    width: 100%;
}

// 时间线
.el-timeline {
    padding: 0px 30px;
}

// 搜索提示消息
.status_info span {
    color: red;
    font-size: 14px;
    margin-left: 15px;
}
</style>
